<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

</head>
<body>

<!--=====================================================================-->
<!--为html元素添加事件-->
<button id="btn-1">alert</button>
<script>
    let oBtn = document.getElementById('btn-1');
    function abc(){
        alert('a');
    }
    //关于abc和abc()的区别
    //oBtn.onclick = abc;     //将onclick事件指向函数abc,并不触发
    //oBtn.onclick = abc();   //直接调用了abc函数

    //也可以使用匿名函数来表示,为btn的添加onclick事件
    oBtn.onclick = function () {
        alert('abc');
    }

    //补充,如果这段script添加在<head>中会因为没有加载button标签而报错,可以使用window.onload
    //通常,行为(js) 样式(css) 结构(html)三者要分离
</script>

</body>
</html>